<template>
  <div>
    <el-form :inline="true">
      <el-upload class="upload-demo"
                 ref="upload"
                 action="http://localhost:8210/base/information/import"
                 accept=".xls,.xlsx"
                 :disabled="isUploading"
                 :limit="1"
                 :show-file-list="false"
                 :on-success="handleFileImportSuccess"
                 :before-upload="beforeUpload"
                 :file-list="fileList"
                 :auto-upload="true">
        <el-button slot="trigger"
                   size="small"
                   type="primary"
                   :disabled="isUploading">上传文件</el-button>
        <div slot="tip"
             class="el-upload__tip">只能上传excel文件</div>
      </el-upload>
    </el-form>
    <el-table ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              border
              stripe
              @selection-change="handleSelectionChange">

      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column prop="id"
                       label="项目id"
                       width="120">
      </el-table-column>
      <el-table-column prop="name"
                       label="项目名称">
      </el-table-column>
      <el-table-column prop="code"
                       label="项目编号">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      fileList: [],
      tableData: [],
      searchForm: {},
      isUploading: false,

    };
  },
  created() {
    this.getProjectList()
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      console.log("勾选")
      console.log(val)
      this.multipleSelection = val;

      this.delBtlStatu = val.length == 0
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getTargetPage()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val
      this.getTargetPage()
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false
      this.editForm = {}
    },
    handleClose() {
      this.resetForm('editForm')
    },

    getProjectList() {
      this.$axios.post("/base/project/page", Object.assign({
        name: this.searchForm.name,
        code: this.searchForm.code,
      })).then(res => {
        this.tableData = res.data.data.records
      })
    },

    submitUpload() {
      let fd = new FormData();

      let file;
      this.fileList.forEach(item => {
        //文件信息中raw才是真的文件
        file = item.raw;
        //console.log(item.raw)
      })
      fd.append("file", this.fileList[0]);
      this.$axios.post('/base/information/import', fd).then(res => {
        if (res.data.code == 200) {
          //console.log(res);
          this.$message('上传成功')
        } else {
          this.$message('失败')
        }
      })


    },
    beforeUpload(file, fileList) {
      this.isUploading = true;
      console.log(file, fileList);
    },
    handleFileImportSuccess(res, file, fileList) {
      console.log(res);
      if (res.code == 200) {
        this.$message('上传成功')
      } else {
        this.$message('失败')
      }
      this.isUploading = false;
      console.log(res);
    }
  }
}
</script>

<style scoped>
</style>